import React, { useState } from 'react';

const CommentInput = ({ comments, setComments }) => {
  const [user, setUser] = useState('');
  const [rating, setRating] = useState(null);
  const handleSubmit = () => {
    setComments([
      {
        id: Date.now,
        user,
        rating,
        comments: 'Very gooooood!!!',
      },
      ...comments,
    ]);
    setUser('');
    setRating('');
  };
  return (
    <div>
      <div>
        user:
        <input value={user} onChange={(e) => setUser(e.target.value)} />
      </div>
      <div>
        rating:
        <input value={rating} onChange={(e) => setRating(Number(e.target.value))} />
      </div>
      <button onClick={handleSubmit}>sumbit</button>
      <button>delete</button>
    </div>
  );
};

export default CommentInput;
